<template>
  <el-dialog
    :class="{ 'custom-dialog': true, border: border, fullscreen: fullscreen }"
    :width="width"
    :title="title"
    append-to-body
    :close-on-click-modal="clickClose"
    @opened="opened"
    @closed="closed"
    :destroy-on-close="closeFree"
    v-model="_value"
  >
    <template #header>
      <slot name="title"></slot>
    </template>
    <slot></slot>
    <template #footer>
      <div v-if="showFooter">
        <el-button size="default" @click="_value = false; cancel()">{{ cancelText }}</el-button>
        <el-button size="default" type="primary" @click="ok">{{okText}}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { computed, toRefs } from 'vue'
export default {
    name: 'WDialog',
    install(Vue) {
        window.$vueApp.component('WDialog', this)
    },
    components: {},
    props: {
        title: {
            type: String,
            default: '',
        },
        width: {
            type: String,
            default: '50%',
        },
        fullscreen: {
            type: Boolean,
            default: false,
        },
        noPadding: {
            type: Boolean,
            default: false,
        },
        modelValue: {
            type: Boolean,
            default: false,
        },
        clickClose: {
            type: Boolean,
            default: false,
        },
        closeFree: {
            type: Boolean,
            default: false,
        },
        showFooter: {
            type: Boolean,
            default: true,
        },
        cancelText: {
            type: String,
            default: '取 消',
        },
        okText: {
            type: String,
            default: '确 定',
        },
        border: {
            type: Boolean,
            default: true,
        }
    },
    emits: ['opened', 'closed', 'cancel', 'ok', 'update:modelValue'],
    setup(props, context) {
        const { modelValue } = toRefs(props)
        const _value = computed({
            get: () => {
                return modelValue.value
            },
            set: val => {
                context.emit('update:modelValue', val)
            }
        })
        const opened = () => {
            context.emit('opened')
        }
        const closed = () => {
            context.emit('closed')
        }
        const cancel = () => {
            context.emit('cancel')
        }
        const ok = () => {
            context.emit('ok')
        }
        return {
            _value,
            opened,
            closed,
            cancel,
            ok
        }
    }
}
</script>

<style>

</style>